<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<script src="./lib/three.js"></script>
		<script src="./js/OrbitControls.js"></script>

		<style>
			body {
				margin: 0;
			}

			canvas {
				width: 100%;
				height: 100%;
				display: block;
			}
		</style>
	</head>
	<body>
		<script>
			var windowWidth = window.innerWidth;
			var windowHeight = window.innerHeight;

			// 创建一个渲染器
			var renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setSize(windowWidth, windowHeight);

			document.body.appendChild(renderer.domElement);

			// 创建一个场景,所有的 3d模型都需要添加到 场景中才可以渲染
			var scene = new THREE.Scene();


			//辅助工具
			var helper = new THREE.AxesHelper(1000);
			scene.add(helper);

			// 创建一个 camera
			var camera = new THREE.PerspectiveCamera(45, windowWidth / windowHeight, 1, 4000);
			camera.position.set(-500, 500, 500);
			camera.lookAt(new THREE.Vector3(0, 0, 0));

			// 环境光
			var light = new THREE.AmbientLight("#0000ff");
			light.position.set(0, 0, 1);
			scene.add(light);

			// 点光源
			spotLight = new THREE.PointLight("#ffffff");
			spotLight.position.set(0, 0, 0);
			scene.add(spotLight);


			var map = new THREE.TextureLoader().load("./img/lala.jpg"); //创建材质,在模型上需要用到
			var material = new THREE.MeshPhongMaterial({
				map: map
			});

			//通过加载图片生成一个纹理
// 			var map = new THREE.TextureLoader().load("./img/sun.jpg");
// 			var material = new THREE.MeshLambertMaterial({
// 				map: map,
// 				side: THREE.DoubleSide
// 			});


			// 			var material = new THREE.MeshBasicMaterial({
			// 				color: 0xff0000,
			// 				wireframe: true
			// 			})
			// 

			// 反光材质
			var material = new THREE.MeshPhongMaterial({
				color: 0xffffff,
			});
// 
			// 兰伯特材质

// 			var material = new THREE.MeshLambertMaterial({
// 				color: 0x00ffff,
// 				// wireframe: true
// 			});
// 

			//立方体 （x轴宽度，y轴高度，z轴深度，沿宽面分段数，沿高度面分段数，沿深度面分段数）
			object = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100, 1, 1, 1), material);
			object.position.set(-200, 0, -200);
			scene.add(object);

			//立方体 （x轴宽度，y轴高度，z轴深度，沿宽面分段数，沿高度面分段数，沿深度面分段数）
			object = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100, 2, 2, 2), material);
			object.position.set(-200, 0, 200);
			scene.add(object);

			//球形网格 （半径长度，水平块的密度，垂直块的密度）
			var object = new THREE.Mesh(new THREE.SphereGeometry(75, 5, 5), material);
			object.position.set(200, 0, -200);
			scene.add(object);

			//球形网格 （半径长度，水平块的密度，垂直块的密度）
			var object = new THREE.Mesh(new THREE.SphereGeometry(75, 50, 50), material);
			object.position.set(200, 0, 200);
			scene.add(object);


			//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
			var controls;

			function initControls() {
				controls = new THREE.OrbitControls(camera, renderer.domElement);

				// 使动画循环使用时阻尼或自转 意思是否有惯性
				controls.enableDamping = true;

				//动态阻尼系数 就是鼠标拖拽旋转灵敏度
				controls.dampingFactor = 0.95;

				//是否可以缩放
				controls.enableZoom = true;

				//是否自动旋转

				controls.autoRotate = true;

				//设置相机距离原点的最远距离
				controls.minDistance = 50;

				//设置相机距离原点的最远距离
				controls.maxDistance = 1000;

				//是否开启右键拖拽
				controls.enablePan = false;

			}

			function animate() {
				// 渲染
				renderer.render(scene, camera);
				requestAnimationFrame(animate);
			}

			function draw() {
				animate();
				initControls();
			}

			draw();
		</script>
	</body>
</html>
